<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<fieldset>
		<legend>记录列表</legend>
		<br>
		<div>
			姓名：<input type="text" placeholder="姓名" />
			年龄：<input type="text" placeholder="年龄" />
			<button onclick="testadd()">添加</button>
			<br><br>
			姓名：<input type="text" placeholder="姓名" />
			<button onclick="testselect()">搜索</button>
			<br><br>
		</div>
		<table style="border:1px solid black; width:600px;" >
			<thead>
				<tr>
					<th style="width: 15%; text-align: left;">ID</th>
					<th style="width: 30%; text-align: left;">姓名</th>
					<th style="width: 30%; text-align: left;">年龄</th>
					<th style="width: 25%; text-align: left;">操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>
		
		
		</fieldset>
		
		<script type="text/javascript">
			var inputs = document.getElementsByTagName("input");
			var id = 1;
			function testadd() {
				var v1 = inputs[0].value;
				var v2 = inputs[1].value;
				
				// if(v1==''||v2==''||/\d+/.test(v1)||/\D+/.test(v2)){
				// 	alert("请正确填写内容")
				// 	return;
				// }
				
				var html = ""
					+"<tr>"
					+	"<td>"+ id++ +"</td>"
					+	"<td>"+ v1 +"</td>"
					+	"<td>"+ v2 +"</td>"
					+	"<td><a href='javascript:;' onclick='testdel(this)'>删除</a> <a href='javascript:;' onclick='testupdate(this)'>修改</a></td>"
					+"</tr>"
				var tbody = document.getElementById("tbody");
				tbody.innerHTML += html;
			}
			
			function testdel(obj) {
				var tr = obj.parentNode.parentNode;	//	parentNode	上一级节点
				if(confirm("是否删除该行记录？")) {
					document.getElementById("tbody").removeChild(tr);
				}
			}
			
			//修改前的回显，修改后的保存
			function testupdate(obj){
				var tdthis = obj.parentNode;
				var tdage = tdthis.previousSibling;	//前一个兄弟标签
				var tdname = tdage.previousSibling;
				var tdid = tdname.previousSibling;
				
				// 回显 
				tdage.innerHTML = "<input type = 'text' id = 'tAge"+tdid+"' value = '"+tdage.innerHTML+"'/>"
				tdname.innerHTML = "<input type = 'text' id = 'tName"+tdid+"' value = '"+tdname.innerHTML+"'/>"
				tdthis.innerHTML = "<a href='javascript:;'>保存</a>";
				// 保存	
				tdthis.getElementsByTagName("a")[0].onclick = function(){
					if(confirm("是否完成该行记录的修改？")) {
						tdage.innerHTML = document.getElementById('tAge'+tdid).value;
						tdname.innerHTML = document.getElementById('tName'+tdid).value;
						tdthis.innerHTML = "<a href='javascript:;' onclick='testdel(this)'>删除</a> <a href='javascript:;' onclick='testupdate(this)'>修改</a>";
					}
				}
			}
			
			function testselect(){
				var trs = document.getElementsByTagName("tr");
				var len = trs.length;
				
				for(var i = 1;i<len; i++){
					trs[i].removeAttribute('style');
				}
				
				var v3 = inputs[2].value;
				
				if(v3 == ''){
					return;
				}
				// cells 单元格
				for(var i = 1;i<len; i++){
					var tname = trs[i].cells[1].innerHTML;
					// if(tname == v3) 全匹配
					if(tname.indexOf(v3)>-1){	// 模糊查询
						trs[i].style.backgroundColor = 'green';
					}
				}
			}
			
			function testadd2() {
				var v1 = inputs[0].value;
				var v2 = inputs[1].value;
				
				if(v1==''||v2==''||/\d+/.test(v1)||/\D+/.test(v2)){
						alert("请正确填写内容")
						return;
					}
				
				var otr = document.createElement("tr");
				
				var otd = document.createElement("td");
				otd.innerHTML = id++;
				otr.appendChild(otd);
				
				var otd = document.createElement("td");
				otd.innerHTML = v1;
				otr.appendChild(otd);
				
				var otd = document.createElement("td");
				otd.innerHTML = v2;
				otr.appendChild(otd);
				
				var otd = document.createElement("td");
				otd.innerHTML = "<a href='javascrip: ;'>删除</a> <a href='javascrip: ;'>修改</a>";
				var at = otd.getElementsByTagName('a');
				at[0].onclick = testdel2;
				at[1].onclick = testupdate2;
				
				otr.appendChild(otd);
				
				document.getElementById("tbody").appendChild(otr);
			}
			
			function testdel2() {
				var tr = this.parentNode.parentNode;
				if(confirm("是否删除该行记录？")) {
					document.getElementById("tbody").removeChild(tr);
				}
			}
			
			function testupdate2(){
				var tdthis = obj.parentNode;
				var tdage = tdthis.previousSibling;	//前一个兄弟标签
				var tdname = tdage.previousSibling;
				var tdid = tdname.previousSibling;
				
				// 回显 
				tdage.innerHTML = "<input type = 'text' id = 'tAge"+tdid+"' value = '"+tdage.innerHTML+"'/>"
				tdname.innerHTML = "<input type = 'text' id = 'tName"+tdid+"' value = '"+tdname.innerHTML+"'/>"
				tdthis.innerHTML = "<a href='javascript:;'>保存</a>";
				// 保存	
				tdthis.getElementsByTagName("a")[0].onclick = function(){
					if(confirm("是否完成该行记录的修改？")) {
						tdage.innerHTML = document.getElementById('tAge'+tdid).value;
						tdname.innerHTML = document.getElementById('tName'+tdid).value;
						tdthis.innerHTML = "<a href='javascript:;' onclick='testdel(this)'>删除</a> <a href='javascript:;' onclick='testupdate(this)'>修改</a>";
					}
				}
			}
			
		</script>
	</body>
</html>
